/*
 图片延迟加载(懒加载) 
   效果：
   最开始渲染页面的时候，不加载真实的图片，而是等待页面渲染完成，再去加载出现在可视区域中的真实图片！
     + 需要懒加载的图片，会被放在一个盒子中
     + <img>的src初始为空，而把真实要加载的地址赋值给其自定义属性
     + 我们让<img>透明度为0(防止部分浏览器出现碎图)，后期真实图片加载成功后再改为1(可以设置过渡动画，实现渐现的效果)
     + 存放<img>的盒子，具备和其相同的宽高，设置灰色的背景(或者Loading背景图)，在真实图片没有加载出来之前，相当于占位效果！！

   意义：
   + 第一次渲染页面，如果<img>没有做懒加载，会开辟HTTP线程，去服务器获取资源；这样不仅占用了有限的HTTP线程数量，而且获取图片资源较慢，会让其他资源获取更慢！
   + 而且如果第一次渲染页面，连图片也一起绘制，这样绘制页面的速度也会变慢！
   + 并且在移动端中，如果我们把没有出现在视口中的图片也做加载，会浪费很多用户的流量！
   + ...
   综上所述：图片延迟加载是必做的优化方案！！

   如何处理？
   思路：页面第一次渲染完 && 图片所在的盒子已经出现在视口中(一露头、出现一半、完全出现)，我们基于自定义属性，获取真实图片地址，赋值给图片的src！
   监听图片是否加载成功，如果加载成功，则让图片透明度为1即可！！
 */
const picBox = document.querySelector('.pic-box'),
    img = picBox.querySelector('img');

// 计算“完全出现”在可视窗口的条件
const computed = function computed() {
    if (picBox.isLoad) return; //已经处理过就不再处理了
    let { top, bottom } = picBox.getBoundingClientRect(),
        winH = document.documentElement.clientHeight;
    if (top >= 0 && top <= winH && bottom >= 0 && bottom <= winH) {
        // 图片懒加载「一般不直接操作页面中的<img>」
        let tempImg = new Image(), //document.createElement('img')
            address = img.getAttribute('data-image');
        tempImg.src = address;
        tempImg.onload = () => {
            img.src = address;
            img.style.opacity = 1;
        };
        // 防止重复操作
        picBox.isLoad = true;
        /* img.src = img.getAttribute('data-image');
        img.onload = () => {
            // 真实图片加载成功
            img.style.opacity = 1;
        }; */
    }
};

// 第一次渲染完页面 或者 滚动条滚动中，随时进行计算
//   + scroll事件在页面滚动中会一直触发「每间隔5~7ms就触发一次」
//     这个默认的触发频率太频繁了，造成了很多性能的损耗！！
//     此时我们需要降低其触发频率（更准确来讲是控制computed函数执行的频率） => 函数节流
window.onload = computed;
window.onscroll = utils.throttle(computed);